<html ng-app="myApp">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>天翼区块链路由器</title>
    <link href="<%=resource%>/imgs/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <link rel="stylesheet" href="<%=resource%>/index.css">
    <link rel="stylesheet" href="<%=resource%>/mobile.css">
    <script type="text/javascript" src="<%=resource%>/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<%=resource%>/js/menu.js"></script>
    <script src="<%=resource%>/angular/angular.js"></script>
    <script src="<%=resource%>/angular/angular-sanitize.min.js"></script>
    <script src="<%=resource%>/angular/angular-animate.min.js"></script>
    <script src="<%=resource%>/js/app/ngapp.js"></script>
    <link href="<%=resource%>/layer/skin/default/layer.css" rel="stylesheet">
    <script src="<%=resource%>/layer/layer.js"></script>
</head>

<body style="background-color: #fff;">
  <div class="wrap">
      <div id="head">
          <span style="margin-left:60px;"></span><img src="<%=resource%>/imgs/logo.png">
          <span style="margin-left:20px;">天翼区块链路由器</span>
          <a href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</a>
          <a href="http://www.skywindlink.com/" target="_blank">访问官网</a>
          <a class="qrcode">APP下载
              <div class="d">
                  <img src="<%=resource%>/imgs/qrcode.jpg">
              </div>
          </a>
    </div>
    <div id="head-phone" style="z-index: 199;">
        <div class="h-left">
            <span><img src="<%=resource%>/imgs/logo.png"></span>
            <span class="h-t">天翼区块链路由器</span>
        </div>
        <div class="h-right">
            <a href="http://www.skywindlink.com/" target="blank">访问官网</a><span class="h-line"> | </span><span class="h-app">APP下载</span>
            <img class="h-nav" src="<%=resource%>/imgs/h-nav.png" alt="">
            <div class="d">
                <img src="<%=resource%>/imgs/qrcode.jpg">
            </div>
        </div>
    </div>
    <div id="phone-nav">
        <div class="nav-close"><img src="<%=resource%>/imgs/nav-close.png"></div>
        <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "index")%>' style="margin-top: 40px">
            <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
            <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
        </div>
        <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
            <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
            <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
            <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
            <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
            <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
        </div>
        <div class="logout"><span href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</span></div>
    </div>
  
    <!-- 中间内容 -->
    <div class="container">
        <div id="menu">
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "index")%>'>
                <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
                <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
            </div>
            <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
                <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
            </div>
            <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
                <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
            </div>
            <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
                <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
                <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
                <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
            </div>
        </div>
        <div class="content" ng-controller="wifiController">
            <div class="c">
                <div class="lb">
                    <span>WiFi设置</span>&nbsp; >&nbsp;
                    <span id="child-title">2.4G WIFI</span>
                </div>
                <div class="ct wifi-main">
                  <div style="background-color: #f5f5f5;overflow: hidden;">
                      <div class="tb">
                          <div class="tbs" index="0" style="width: 33.33%;" ng-repeat="item in tabs" ng-click="switch($index)" ng-class="{'active': $index === currentTab && !isMobileWidth}">
                            <span ng-class="{ 'tab-active' : $index === currentTab && isMobileWidth }">{{item}}</span>
                          </div>
                      </div>
                  </div>
                    
                    <!-- 每一个ci class 是一个选项卡切换，2.4 -->
                    <div class="tab" ng-show="currentTab === 0">
                        <div class="row">
                            <div class="n-b">
                                <div class="left-text">
                                    <div class="ti">2.4G状态</div>
                                </div>
                                <div class="right-text">
                                    <div class="bt" ng-click="clickStatus(twoWifiConfig)">
                                        <div ng-show="twoWifiConfig.disabled=='0'" class="cl"><span>ON</span></div>
                                        <div ng-show="twoWifiConfig.disabled=='1'" class="cf "><span>OFF</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="n-b">
                                <div class="left-text">
                                    <div class="ti">名称</div>
                                </div>
                                <div class="right-text right-text-long">
                                  <input type="text" ng-model="twoWifiConfig.ssid">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="n-b">
                                <div class="left-text">
                                    <div class="ti">密码</div>
                                </div>
                                <div class="right-text right-text-long">
                                  <div class="shrink-content">
                                      <input type="password" ng-readonly="twoWifiConfig.encryption=='none'" ng-model="twoWifiConfig.key">
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="n-b">
                                <div class="left-text" style="vertical-align: top;">
                                    <div class="ti">加密方式</div>
                                </div>
                                <div class="right-text right-text-long">
                                  <div class="inline-block">
                                    <input type="radio" name="twoWifiConfig.encryption" value="psk2" ng-model="twoWifiConfig.encryption" ng-click="checktpwd(1)">
                                    <span>WPA2</span>
                                  </div>
                                    
                                  <div class="inline-block">
                                    <input type="radio" name="twoWifiConfig.encryption" value="psk-mixed" ng-model="twoWifiConfig.encryption" ng-click="checktpwd(1)">
                                    <span>WPA/WPA2</span>
                                  </div>

                                  <div class="inline-block">
                                    <input type="radio" name="twoWifiConfig.encryption" value="none" ng-model="twoWifiConfig.encryption" ng-click="checktpwd(0)">
                                    <span>无密码</span>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">隐藏网络</div>
                                </div>
                                <div class="right-text">
                                    <div class="bt" ng-click="clickHidden(twoWifiConfig)">
                                        <div ng-show="twoWifiConfig.hidden=='1'" class="cl"><span>ON</span></div>
                                        <div ng-show="twoWifiConfig.hidden=='0'" class="cf "><span>OFF</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row h-80">
                            <div class="n-b">
                                <div class="left-text"></div>
                                <div class="m-20 right-text right-text-long">
                                    <button class="btn2" ng-click="setwifi(0)">保存配置</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 每一个ci class 是一个选项卡切换 5-->
                    <div class="tab" ng-show="currentTab === 1">
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">5G状态</div>
                                </div>
                                <div class="right-text">
                                    <div class="bt" ng-click="clickStatus(fiveWifiConfig)">
                                        <div ng-show="fiveWifiConfig.disabled=='0'" class="cl"><span>ON</span></div>
                                        <div ng-show="fiveWifiConfig.disabled=='1'" class="cf"><span>OFF</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">名称</div>
                                </div>
                                <div class="right-text right-text-long"><input type="text" ng-model="fiveWifiConfig.ssid"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">密码</div>
                                </div>
                                <div class="right-text right-text-long">
                                  <div class="shrink-content">
                                    <input type="password" ng-readonly="fiveWifiConfig.encryption=='none'" ng-model="fiveWifiConfig.key">
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">加密方式</div>
                                </div>
                                <div class="right-text right-text-long" style="vertical-align: top;">
                                  <div class="inline-block">
                                    <input type="radio" name="fiveWifiConfig.encryption" value="psk2" ng-model="fiveWifiConfig.encryption" ng-click="checkfpwd(1)">
                                    <span>WPA2</span>
                                  </div>
                                  <div class="inline-block">
                                    <input type="radio" name="fiveWifiConfig.encryption" value="psk-mixed" ng-model="fiveWifiConfig.encryption" ng-click="checkfpwd(1)">
                                    <span>WPA/WPA2</span>
                                  </div>
                                  <div class="inline-block">
                                    <input type="radio" name="fiveWifiConfig.encryption" value="none" ng-model="fiveWifiConfig.encryption" ng-click="checkfpwd(0)">
                                    <span>无密码</span>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">隐藏网络</div>
                                </div>
                                <div class="right-text">
                                    <div class="bt" ng-click="clickHidden(fiveWifiConfig)">
                                        <div ng-show="fiveWifiConfig.hidden=='1'" class="cl"><span>ON</span></div>
                                        <div ng-show="fiveWifiConfig.hidden=='0'" class="cf "><span>OFF</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row h-80">
                            <div class="r  n-b">
                                <div class="left-text"></div>
                                <div class="right-text m-20 right-text-long">
                                    <button class="btn2" ng-click="setwifi(1)">保存配置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 每一个ci class 是一个选项卡切换 访客网络-->
                    <div class="tab" ng-show="currentTab === 2">
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">访客状态</div>
                                </div>
                                <div class="right-text">
                                    <div class="bt" ng-click="clickStatus(gWifiConfig)">
                                        <div ng-show="gWifiConfig.disabled=='0'" class="cl"><span>ON</span></div>
                                        <div ng-show="gWifiConfig.disabled=='1'" class="cf "><span>OFF</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">名称</div>
                                </div>
                                <div class="right-text right-text-long"><input type="text" ng-model="gWifiConfig.ssid"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">密码</div>
                                </div>
                                <div class="right-text right-text-long">
                                  <div class="shrink-content">
                                    <input type="password" ng-readonly="gWifiConfig.encryption=='none'" ng-model="gWifiConfig.key">
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">加密方式</div>
                                </div>
                                <div class="right-text right-text-long" style="vertical-align: top;">
                                  <div class="inline-block">
                                    <input type="radio" name="gWifiConfig.encryption" value="psk2" ng-model="gWifiConfig.encryption" ng-click="checkgpwd(1)">
                                    <span>WPA2</span>
                                  </div>
                                    
                                  <div class="inline-block">
                                    <input type="radio" name="gWifiConfig.encryption" value="psk-mixed" ng-model="gWifiConfig.encryption" ng-click="checkgpwd(1)">
                                    <span>WPA/WPA2</span>
                                  </div>

                                  <div class="inline-block">
                                      <input type="radio" name="gWifiConfig.encryption" value="none" ng-model="gWifiConfig.encryption" ng-click="checkgpwd(0)">
                                      <span>无密码</span>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="r n-b">
                                <div class="left-text">
                                    <div class="ti">隐藏网络</div>
                                </div>
                                <div class="right-text">
                                    <div class="bt" ng-click="clickHidden(gWifiConfig)">
                                        <div ng-show="gWifiConfig.hidden=='1'" class="cl"><span>ON</span></div>
                                        <div ng-show="gWifiConfig.hidden=='0'" class="cf "><span>OFF</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row h-80">
                            <div class="r  n-b">
                                <div class="left-text"></div>
                                <div class="m-20 right-text right-text-long">
                                    <button class="btn2" ng-click="setwifi(2)">保存配置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="footer-new2">
                    <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
                </div>
            </div>
            <div class="hide">
                <div id="loading">
                    <div style="text-align:center;padding:40px;font-size:16px;">设置成功正在重启，需要30s等待...</div>
                    <div style="text-align: center;"><img style="width:80px;height: 80px;" src="<%=resource%>/imgs/loading.gif"></div>
                </div>
            </div>
            <!-- <div class="hide">
                <img class="eye-close" src="<%=resource%>/imgs/eye-close.png">
                <img class="eye-open" src="<%=resource%>/imgs/eye-open.png">
            </div> -->
        </div>
        
    </div>
  </div>
  <div class="footer-new">
      <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
  </div>
</body>

</html>
<script type="text/javascript">
  app.controller('wifiController', function($scope, $http) {
      $scope.tabs = ['2.4G WIFI', '5G WIFI', '访客网络'];
      $scope.currentTab = 0;
      $scope.isMobileWidth = false;
      $scope.clickStatus = function(item) {
          if (item.disabled == "0") {
              item.disabled = "1";
          } else {
              item.disabled = "0";
          }
      }
      $scope.clickHidden = function(item) {
          if (item.hidden == "0") {
              item.hidden = "1";
          } else {
              item.hidden = "0";
          }
      }
      $scope.switch = function(index) {
        $scope.currentTab = index;
      }

      $scope.getwifi = function() {
          var url = '<%=luci.dispatcher.build_url("web", "system", "wifi")%>';
          $http.post(url).success(function(data) {
              console.log(data);
              if (data.code == 0) {
                  $scope.twoWifiConfig = data.data.ra0;
                  $scope.fiveWifiConfig = data.data.rai0;
                  $scope.gWifiConfig = data.data.ra1;
                  if ($scope.twoWifiConfig.encryption === 'none') {
                      $scope.twoWifiConfig.key = '';
                  }
                  if ($scope.fiveWifiConfig.encryption === 'none') {
                      $scope.fiveWifiConfig.key = '';
                  }
                  if ($scope.gWifiConfig.encryption === 'none') {
                      $scope.gWifiConfig.key = '';
                  }
                  if ($scope.twoWifiConfig.hidden == "true") {
                      $scope.twoWifiConfig.hidden = "1"
                  }
                  if ($scope.fiveWifiConfig.hidden == "true") {
                      $scope.fiveWifiConfig.hidden = "1"
                  }
                  if ($scope.gWifiConfig.hidden == "true") {
                      $scope.gWifiConfig.hidden = "1"
                  }
              } else {
                  utils.alert(data.msg);
              }
          });
      }

      $scope.setwifi = function(type) {
          $scope.wifitype = type;
          utils.confirmdo("该操作将重启wifi并导致wifi下的所有设备失去连接，是否确认修改？", $scope.setwifido);
      }

      $scope.setwifido = function() {
          var type = $scope.wifitype;
          var url = '<%=luci.dispatcher.build_url("web", "system", "wifiset")%>';
          var data = {};
          if (type == 0) {
              data = $scope.twoWifiConfig;
              data.iface = "ra0";
          } else if (type == 1) {
              data = $scope.fiveWifiConfig;
              data.iface = "rai0";
          } else if (type == 2) {
              data = $scope.gWifiConfig;
              data.iface = "ra1";
          }
          $http({
              method: 'POST',
              url: url,
              data: $.param(data),
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              }
          }).success(function(data) {
              if (data.code == 0) {
                  utils.loading(30000, $("#loading").html());
              } else {
                  utils.alert(data.msg);
              }
          });
      }

      $scope.checktpwd = function(type) {
          if (type == 0) {
              $scope.twoWifiConfig.skey = $scope.twoWifiConfig.key;
              $scope.twoWifiConfig.key = "";
          } else {
              if ($scope.twoWifiConfig.skey != undefined) {
                  $scope.twoWifiConfig.key = $scope.twoWifiConfig.skey;
              }
          }
      }

      $scope.checkfpwd = function(type) {
          if (type == 0) {
              $scope.fiveWifiConfig.skey = $scope.fiveWifiConfig.key;
              $scope.fiveWifiConfig.key = "";
          } else {
              if ($scope.fiveWifiConfig.skey != undefined) {
                  $scope.fiveWifiConfig.key = $scope.fiveWifiConfig.skey;
              }
          }
      }

      $scope.checkgpwd = function(type) {
          if (type == 0) {
              $scope.gWifiConfig.skey = $scope.gWifiConfig.key;
              $scope.gWifiConfig.key = "";
          } else {
              if ($scope.gWifiConfig.skey != undefined) {
                  $scope.gWifiConfig.key = $scope.gWifiConfig.skey;
              }
          }
      }
      $scope.init = function() {
        var width = $(window).width()
        if (width < 768) {
          $scope.isMobileWidth = true
        }
        $scope.getwifi();
      };
      $scope.init();
  });
</script>